<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta http-equiv="Pragma" content="no-cache"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<link rel="stylesheet" type="text/css" href="css/style.css"/>

  <link rel="stylesheet" href="css/jPages.css">
  <link rel="stylesheet" href="css/animate.css">
 		<link rel="stylesheet" href="css/swiper.min.css">	
  <script src="js/jquery-1.9.1.js"></script>
  <script src="js/jPages.js"></script>
		<script>!function (e) { function t(a) { if (i[a]) return i[a].exports; var n = i[a] = { exports: {}, id: a, loaded: !1 }; return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports } var i = {}; return t.m = e, t.c = i, t.p = "", t(0) }([function (e, t) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); var i = window; t["default"] = i.flex = function (e, t) { var a = e || 100, n = t || 1, r = i.document, o = navigator.userAgent, d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i), l = o.match(/U3\/((\d+|\.){5,})/i), c = l && parseInt(l[1].split(".").join(""), 10) >= 80, p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi), s = i.devicePixelRatio || 1; p || d && d[1] > 534 || c || (s = 1); var u = 1 / s, m = r.querySelector('meta[name="viewport"]'); m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u), r.documentElement.style.fontSize = a / 2 * s * n + "px" }, e.exports = t["default"] }]);
        flex(100, 1);
		</script>
		  <script>
  $(function() {
    $("div.holder").jPages({
      containerID: "itemContainer",
      previous : "＜",
      next : "＞",
      perPage:64,
      midRange: 3,
      direction: "random",
      animation: "flipInY"
    });
    $("button").click(function(){
      var page = parseInt( $("input").val() );
      $("div.holder").jPages( page );

    });
  });
  </script>
		<style>
			.kuang{
				padding-bottom: 10%;
			}
			.kuai{		
			    height: 75%;
			    width: 90%;
			    margin: 0 5%;
				flex-wrap: wrap;
				display: flex;
			}
			.log{
			    margin-top: 10%;
				height: 14%;
			}
			.log img{		
			    width: 50%;
			    margin-left: 5%; 
			}
			.btn{
			    position: absolute;
			    right: 15%;
			    top: 1em;
			    display: block;
			    width: 0.7em;
			    height: 0.7em;
				background: url(img/btn.png) no-repeat;
				background-size: 100% 100%;
			}
			.btn:hover{
			    position: absolute;
			    right: 15%;
			    top: 1em;
			    display: block;
			    width: 0.7em;
			    height: 0.7em;
				background: url(img/btn_1.png) no-repeat;
				background-size: 100% 100%;
			}
			.kuang p{
			    line-height: 1.5;
			    font-weight: 100;
				text-align: center;
				font-size: 0.45em;
				color: white;
				letter-spacing: 5px;
				margin-top: 10%;
			}
			.kuang b{
				font-size: 0.3em;
				color: white;
			}
			.kuai a{	
				background-color: rgba(29,93,83,.5);
			    width: 43.5%;
			    height: 6em;
			    float: left;
			    margin: 1.5% 2.5%;
				text-align: center;
			    font-size: 0.3em;
    			font-weight: 100;
			    color: white;
			    letter-spacing: 4px;
			    line-height: 5.5em;
    			border-radius: 5px;
    			border: solid #25a7ac 2px;
			}
			.kuai img{
				width: 100%;
				height: 100%;
			}
			.kuai b{
			    font-size: 0.25em;
    			font-weight: 100;
				float: left;
			    width: 45%;
			    color: white;
				text-align: center;
			    margin: 1.5% 2.5%;
			}
			.kuang b{
    			font-weight: 100;
			}
			.tiaoye{
				margin-top: -10%;
				width: 100%;
				text-align: center;
			}
			.tiaoye input{
				font-size: 0.3em;
				text-align: center;
				width: 5%;
				color: white;
				margin: 0 2%;
				padding: 1% 2%;
				background-color: rgba(29,93,83,.5);
				border-style: none;
				border-radius: 10%;
			}
			.tiaoye button{
				font-size: 0.3em;
				color: white;
				padding: 1% 2%;
				margin-left: 2%;
				border-radius: 10%;
				border-style: none;
				background-color: rgba(29,93,83,.5);
			}
			.tiaoye button:hover{
				background: #199662;
			}
		    .swiper-container {
		      width: 100%;
		      height: 100%;
		    }
		    .swiper-slide {
			    height: auto;
			    box-sizing: border-box;
			    padding-bottom: 10%;
		    }
		</style>
	</head>
	<body>
		<div class="swiper-container">
		    <div class="swiper-wrapper">
				<div class="swiper-slide kuang">
					<div class="log">
							<img src="img/logo.png" />
					</div>
					<a class="btn" href="javascript:void(0);" onclick="javascript:history.back(-1);"></a>
					<div id="">
						<p>珍稀植物</p>
		      			<div class="holder"></div>
		      			<div id="itemContainer" class="kuai">
							<a href="dongwu-7-1.html"><img src="img/春夏季节（雄鹿）.jpg" /></a>
							<a>暂无图片</a>
							<b>珍稀植物</b>
							<b>珍稀植物</b>
							<a><img src="img/春夏季节（雄鹿）.jpg" /></a>
							<a><img src="img/春夏季节（雄鹿）.jpg" /></a>
							<b>珍稀植物</b>
							<b>珍稀植物</b>
							<a><img src="img/春夏季节（雄鹿）.jpg" /></a>
							<a><img src="img/春夏季节（雄鹿）.jpg" /></a>
							<b>珍稀植物</b>
							<b>珍稀植物</b>
							<a><img src="img/春夏季节（雄鹿）.jpg" /></a>
							<a><img src="img/春夏季节（雄鹿）.jpg" /></a>
							<b>珍稀植物</b>
							<b>珍稀植物</b>
							<a><img src="img/春夏季节（雄鹿）.jpg" /></a>
							<a><img src="img/春夏季节（雄鹿）.jpg" /></a>
							<b>珍稀植物</b>
							<b>珍稀植物</b>
							<a><img src="img/春夏季节（雄鹿）.jpg" /></a>
							<a><img src="img/春夏季节（雄鹿）.jpg" /></a>
							<b>珍稀植物</b>
							<b>珍稀植物</b>
							<a><img src="img/春夏季节（雄鹿）.jpg" /></a>
							<a><img src="img/春夏季节（雄鹿）.jpg" /></a>
							<b>珍稀植物</b>
							<b>珍稀植物</b>
							<a><img src="img/春夏季节（雄鹿）.jpg" /></a>
							<a><img src="img/春夏季节（雄鹿）.jpg" /></a>
							<b>珍稀植物</b>
							<b>珍稀植物</b>
							<a><img src="img/春夏季节（雄鹿）.jpg" /></a>
							<a><img src="img/春夏季节（雄鹿）.jpg" /></a>
							<b>珍稀植物</b>
							<b>珍稀植物</b>
						</div>
				
				    	<div class="holder"></div>
				    	<div class="tiaoye"><b>跳到</b><input type="text" value="1" /><b>页</b><button>确定</button></div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- Add Scroll Bar -->
		<div class="swiper-scrollbar"></div>
		
		<script src="js/swiper.min.js"></script>
		<script>
		    var swiper = new Swiper('.swiper-container', {
		      direction: 'vertical',
		      slidesPerView: 'auto',
		      freeMode: true,
		      scrollbar: {
		        el: '.swiper-scrollbar',
		      },
		      mousewheel: true,
		    });
		</script>
	</body>
</html>

